<template>
	<s-layout title="提交订单">
		<view class="list ss-flex flex-column justify-center align-center ss-p-t-20">
			<view class="item ss-p-30 ss-m-b-20" v-for="(item,index) in show_list" :key="index">
				<view class="store-title">
					<view class="go-info ss-flex justify-start align-center" @click="sheep.$router.go('/pages/merchant/info', {
                      id:item.id,
                    })">
						<view style="max-width: 550rpx;" class="go-text ss-line-1">{{item.name}}</view>
						<uni-icons type="right" size="16" color="#494949"></uni-icons>
					</view>
				</view>
				<view class="goods ss-flex ss-m-t-30">
					<image class="goods-image ss-m-r-20" :src="sheep.$url.cdn(item.goods_info.image)" mode="aspectFill">
					</image>
					<view class="goods-text flex-sub ss-flex flex-column justify-between align-start">
						<view class="goods-name ss-line-1">{{item.goods_info.title}}</view>
						<view class="goods-price ss-flex justify-between align-center">
							<view class="price">￥{{item.goods_info.price}}</view>
							<view class="num">x{{item.goods_num}}</view>
						</view>
					</view>
				</view>
				<view class="total-price ss-flex justify-between align-center ss-m-t-30">
					<view class="left">商品总价(共{{item.goods_num}}件)</view>
					<view class="right">￥{{original(item.goods_info.original_price,item.goods_num)}}</view>
				</view>
				<view class="discount ss-m-t-30">
					<view class="discount-top ss-flex justify-between align-center">
						<view class="left">团购优惠</view>
						<view class="right">{{discount(item)}}</view>
					</view>
					<view class="discount-bottom ss-flex justify-between align-center ss-m-t-10">
						<view class="left">银贯宝优惠券</view>
						<view class="go-info ss-flex justify-start align-center">
							<view class="go-text" style="font-size: 24rpx;color: #A1A1A1;font-weight: 400;">暂无可用</view>
							<uni-icons type="right" size="14" color="#A1A1A1"></uni-icons>
						</view>
					</view>
				</view>
				<view class="sum-price ss-m-t-30">小计￥{{NowPrice(item)}}</view>
			</view>
		</view>
		<view style="width: 1rpx;height: 250rpx;"></view>
		<view class="bottom-box ss-safe-bottom">
			<view class="ss-p-30">
				<view class="btn-box ss-flex justify-between align-center">
					<view class="btn-box-left">
						<view class="btn-box-price ss-flex">
							<view class="left">合计:</view>
							<view class="right">￥{{state.sum_price}}</view>
						</view>
						<view class="btn-box-discount ss-m-t-5">共{{state.sum_num}}件 总优惠￥{{state.discount_price}}</view>
					</view>
					<view class="btn-box-right" @click="confirm">结算({{state.sum_num}})</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	const state = reactive({
		list: [],
		discount_price: '',
		sum_num: '',
		sum_price: ''
	})

	const show_list = computed(() => sheep.$store('cart').groupSelectList)

	onLoad((options) => {
		if (options) {
			state.list = JSON.parse(options.list)
			state.sum_price = options.sum_price
			state.sum_num = options.sum_num
			state.discount_price = options.discount_price
		}
	})

	const confirm = async () => {
	
		const {
			error,
			data
		} = await sheep.$api.merchant.createGroup({
			order_type: "group",
			goods_list: state.list,
			from: "cart",
			share_id: "",
		})
		if (error === 0) {
			if (data.status === 'paid') {
				sheep.$router.redirect('/pages/pay/effect', {
					orderSN: data.order_sn,
				});
			} else {
				sheep.$router.redirect('/pages/pay/more', {
					orderSN: data.order_sn,
				});
			}
		}
		
		
	}

	const original = (price, num) => {
		let money = Number(price) * num
		return sheep.$helper.numFunc(money)
	}

	const discount = (item) => {
		if (item.goods_info.is_discount === 0) {
			return '￥0'
		}
		let money = (Number(item.goods_info.original_price) - Number(item.goods_info.price)) * item.goods_num
		return `-￥${sheep.$helper.numFunc(money)}`
	}

	const NowPrice = (item) => {
		let money = Number(item.goods_info.price) * item.goods_num
		return `${sheep.$helper.numFunc(money)}`
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.list {
		.item {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.goods {
				.goods-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}

				.goods-text {
					height: 120rpx;

					.goods-name {
						width: 100%;
						font-weight: 500;
						font-size: 32rpx;
						color: #2A2A2A;
					}

					.goods-price {
						width: 100%;

						.price {
							font-weight: bold;
							font-size: 26rpx;
							color: #282828;
						}

						.num {
							font-weight: 400;
							font-size: 26rpx;
							color: #A2A2A2;
						}
					}
				}
			}

			.total-price {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E7E7E7;

				.left {
					font-weight: 400;
					font-size: 28rpx;
					color: #282828;
				}

				.right {
					font-weight: bold;
					font-size: 28rpx;
					color: #282828;
				}
			}

			.discount {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E7E7E7;

				.discount-top {
					.left {
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
					}

					.right {
						font-weight: 400;
						font-size: 28rpx;
						color: #35C7A8;
					}
				}

				.discount-bottom {
					.left {
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
					}
				}
			}

			.sum-price {
				text-align: right;
				font-weight: 400;
				font-size: 28rpx;
				color: #282828;
			}
		}
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background-color: #fff;

		.btn-box {

			.btn-box-left {
				.btn-box-price {
					.left {
						font-weight: 400;
						font-size: 24rpx;
						color: #585858;
					}

					.right {
						font-weight: 500;
						font-size: 34rpx;
						color: #35C7A8;
					}
				}

				.btn-box-discount {
					font-weight: 400;
					font-size: 24rpx;
					color: #7A7A7A;
				}
			}

			.btn-box-right {
				width: 240rpx;
				height: 80rpx;
				background: #35C7A8;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}

	.go-info {
		.go-text {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #343434;
		}
	}
</style>